<template>
  <div :style="nodeData.style" @mousedown="handleMouseDown" class="box">
    <svg
      :preserveAspectRatio="keepProportions ? 'xMidYMid meet' : 'none'"
      viewBox="0 0 100 100"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M 0 0 L 0 98 L 50 50 L 100 98 L 100 0 L 50 50 L 0 0"
        :fill="nodeData.currentStyle.fill"
        :stroke="nodeData.currentStyle.stroke"
        :stroke-width="nodeData.currentStyle.strokeWidth"
      ></path>
    </svg>
  </div>
</template>
<script>
import mixin from "./mixin";
export default {
  name: "TestCom2",
  mixins: [mixin],
  data() {
    return {
      keepProportions: true,
      nodeData: {
        shape: "TestCom2", //节点名称，不能重复,必须要跟组件名称一致，不然找不到组件导入
        //节点数据
        text: "阀门",
        createNodeDescribe: true,
        // 普遍样式
        currentStyle: {
          fill: "#fff",
          stroke: "#000",
          strokeWidth: 4,
        },
        isDropEnd: false,
        // 其他样式
        style: {},
        // 文本偏移位置
        offset: {
          x: 0,
          y: -68,
        },
      },
    };
  },
  mounted() {},
  methods: {
    createPort() {
      // 特殊组件内部重写
      if (this.linkPort && this.node) {
        this.node.addPorts([
          {
            id: "port1",
            group: "right",
            attrs: {
              circle: {
                r: 3,
                magnet: true,
                stroke: "#5B8FFA",
                strokeWidth: 1,
                fill: "#fff",
                cx: -3,
              },
            },
          },
          {
            id: "port2",
            group: "left",
            attrs: {
              circle: {
                r: 3,
                magnet: true,
                stroke: "#5B8FFA",
                strokeWidth: 1,
                fill: "#fff",
                cx: 3,
              },
            },
          },
        ]);
      }
    },
  },
};
</script>
<style scoped lang="less">
.box {
  width: 100%;
  height: 100%;
  cursor: move;

  svg {
    width: 100%;
    height: 100%;
  }
}
</style>
